<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>原材料管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <div align="center" class="d1" style="color: mediumblue">
        <div style="float: right">
          <el-button type="text" @click="importExcel = true">导入</el-button>
          <el-button type="text" @click="exportExcel">导出</el-button>
        </div>
        <h3>原材料管理界面</h3>
      </div>
      <div class="d2">
        <el-form :model="searchForm" class="demo-form-inline">
          <el-row :gutter="20">
            <el-form-item>
              <el-col :span="5">
                <el-input placeholder="关键字" v-model="searchForm.name"></el-input>
              </el-col>
              <div style="float: right">
                <el-button @click="searchUser" plain type="info">搜索</el-button>
                <el-button @click="addmaterial" type="primary">添加原材料</el-button>
              </div>
            </el-form-item>
          </el-row>
        </el-form>
      </div>

      <el-table
        :data="materialList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>

        <el-table-column
          label="编号"
          prop="code">
        </el-table-column>
        <el-table-column
          label="名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="化学元素叫法"
          prop="chemical">
        </el-table-column>
        <el-table-column
          label="密度"
          prop="density">
        </el-table-column>
        <el-table-column
          label="硬度"
          prop="hardness">
        </el-table-column>
        <el-table-column
          label="材料介绍"
          prop="remarks">
        </el-table-column>
        <el-table-column
          label="单价"
          prop="price">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-col :span="12">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <div>
                    <el-button @click="del(scope.row.id)" plain type="danger">删除</el-button>
                  </div>
                  <div>
                    <el-button @click="detailById(scope.row.id)" plain type="primary">明细</el-button>
                  </div>
                  <div>
                    <el-button @click="updetematerial(scope.row.id)" plain type="primary">修改</el-button>
                  </div>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </template>
        </el-table-column>
      </el-table>
      <div align="center">
        <el-pagination
          :current-page="page.pagenum"
          :page-size="page.pagesize"
          :page-sizes="[5, 10, 20, 40]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      <el-dialog :close-on-click-modal="false" title="明细" :visible.sync="userFormVisible"> <!--用户表单框 -->
        <el-form :model=" materiaForm" label-width="70px">
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="编号">
                <el-input v-model="materiaForm.code" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="名称">
                <el-input v-model="materiaForm.name" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="化学元素叫法">
                <el-input v-model="materiaForm.chemical" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="密度">
                <el-input v-model="materiaForm.density" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="硬度">
                <el-input v-model="materiaForm.hardness" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="材料介绍">
                <el-input v-model="materiaForm.remarks" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="单价">
                <el-input v-model="materiaForm.price" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="dialog-footer" slot="footer">
          <el-button @click="userFormVisible = false">取 消</el-button>
          <el-button @click="userFormVisible = false" type="primary">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="导入Excel信息" width="400px" :visible.sync="importExcel">
        <el-upload
          class="upload-demo"
          drag
          :headers="auth"
          :on-success="uploadExcel"
          action="/api/material/importExcel"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">上传用户Excel数据</div>
        </el-upload>
      </el-dialog>

    </el-card>

  </div>

</template>

<script>

  export default {
    name: "material",
    data() {
      return {
        userFormVisible: false,
        materiaForm: {},
        searchForm: {name: ""},
        materialList: [],
        auth:{},
        page: {
          pagenum: 0,
          pagesize: 5
        },
        total: 0,
        importExcel:false,
      }
    },
    methods: {

      updetematerial:function(id){//修改
        this.$router.push({path:'/addaddmaterial',query:{id}});
      },
      addmaterial: function () {//添加
        this.$router.push('/addaddmaterial');
      },
      del: function (id) {//删除
        this.$http.delete("/material/del/" + id).then((res) => {
          if (res.data.success) {
            this.$message.success(res.data.message);
            this.searchUser();
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      detailById: function (id) {//查询当前id的用户明细
        this.$http.get("/material/get/" + id).then((res) => {
          if (res.data.success) {
            this.materiaForm = res.data.result //赋值
            this.userFormVisible = true //显示dialog框
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      searchUser: function () {//用户列表
        this.$http.post("/material/list/" + this.page.pagenum + "/" + this.page.pagesize, this.searchForm).then((res) => {
          this.materialList = res.data.result.list;
          this.total = res.data.result.total;
        });
      },
      handleSizeChange: function (val) {
        this.page.pagesize = val;
        this.searchUser();
      },
      handleCurrentChange: function (val) {
        this.page.pagenum = val;
        this.searchUser();
      },
      exportExcel() {
        location.href="http://localhost:8080/material/exportExcel"
      },
      uploadExcel(res,file){
        if(res.success){
          this.$message.success(res.message)
          this.importExcel=false
          this.searchUser()
        }
      }
    },
    filters: {},
    mounted() {
      this.searchUser();//获取列表
      //设置token
      this.auth.token=sessionStorage.getItem("token");
    }
  }
</script>

<style scoped>
  .d1 {
    border-bottom: 1px solid #333744;
  }

  .d2 {
    margin: 20px
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
